<template>
  <div class="app-container pull-auto">
    <br /><br />
    <avue-crud ref="crud" 
               :page="page" 
               :data="tableData" 
               :table-loading="tableLoading" 
               :option="tableOption" 
               @current-change="currentChange" 
               @size-change="sizeChange" 
               @refresh-change="refreshChange">
      <template slot-scope="scope" slot="menu">
        <el-button type="primary" icon="el-icon-view" size="small" plain @click="handleEdit(scope.row,scope.index)">查看</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import {
  fetchList
} from '@/api/token'
import { tableOption } from '@/const/crud/token'
import { mapGetters } from 'vuex'
export default {
  name: 'route',
  data() {
    return {
      tableData: [],
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 20 //每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption
    }
  },
  created() {
    this.getList()
  },
  mounted: function() {},
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    /**
       * 刷新回调
       */
    refreshChange() {
      this.getList();
    },
    getList() {
      this.tableLoading = true
      fetchList({
        page: this.page.currentPage,
        limit: this.page.pageSize
      }).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    sizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
  }
}
</script>

<style lang="scss" scoped>
</style>

